<style scoped>
table {
  display: table;
  border-collapse: separate;
  border-spacing: 2px;
  border-color: grey;
}
.boot-page {
  margin-top: 22px;
}
.boot-page .table {
  border-collapse: collapse;
  width: 100%;
  background-color: #fff;
  font-size: 14px;
  margin-bottom: 45px;
  line-height: 1.5em;
}
.boot-page .table tr {
  display: table-row;
  vertical-align: inherit;
  border-color: inherit;
}
.boot-page .table tr td:first-child {
  padding-left: 10px;
}
.boot-page .table tr td {
  color: #333;
}
.boot-page .table tr td {
  border-bottom: 1px solid #d8d8d8;
  padding: 15px;
  max-width: 250px;
  border-top: 1px solid #d8d8d8;
}
</style>
  <!-- 引导页 -->
<template>
  <div class="boot-page noselect" v-show="false">
    <span class="tip">特殊页面</span>
    <table class="table" v-loading="loading">
      <tbody>
        <tr>
          <td>引导页</td>
          <td width="120">
            <el-switch v-model="open" active-color="#13ce66" :disabled="tempBoot">
            </el-switch>
            <span
              style="line-height: 1;font-size: 14px;display: inline-block;color:#666666;">&nbsp;{{open?'开启':'关闭'}}</span>
          </td>
          <td width="320">
            停留时间：
            <el-checkbox v-model="permanent" :disabled="tempBoot">永久</el-checkbox>
            &nbsp;&nbsp;&nbsp;
            <el-input-number size="mini" v-model="time" :min="permanent? 0: 1" :max="600"
              :disabled="permanent&&tempBoot">
            </el-input-number>
          </td>
          <td width="120">
            <el-button type="text" size="small"> SEO </el-button>
            <el-button type="text" size="small" @click="saveBootPage">保存 </el-button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  created () {
    this.initData()
  },
  data () {
    return {
      loading: true,
      open: false,
      permanent: true,
      time: 0,
      // 临时阻止引导页
      tempBoot: true
    }
  },
  watch: {
    permanent: {
      handler (permanent) {
        if (!permanent && this.time === 0) {
          this.time = 5
        }
        if (permanent) {
          this.time = 0
        }
      },
      deep: true
    }
  },
  methods: {
    initData () {
      this.$post('/page/bootpage').then(response => {
        if (response && response.id) {
          responseInitBootPageData(this, response)
        }
        this.loading = false
      })
    },
    saveBootPage () {
      if (this.tempBoot) {
        this.$message.warning('暂未开放引导页面编辑！')
        return
      }
      this.loading = true
      this.$post('/page/bootpage-save', {
        status: this.open ? 1 : 0,
        guideConfig: JSON.stringify({ permanent: this.permanent ? 1 : 0, time: this.time })
      }).then(response => {
        if (response && response.id) {
          responseInitBootPageData(this, response)
          this.loading = false
        } else {
          this.initData()
        }
      })
    }
  }
}

function responseInitBootPageData (vue, data) {
  vue.open = parseInt(data.status) > 0
  if (data.guideConfig) {
    let guideConfig = JSON.parse(data.guideConfig)
    if (typeof guideConfig.permanent === 'number' && typeof guideConfig.time === 'number') {
      vue.permanent = parseInt(guideConfig.permanent) > 0
      vue.time = guideConfig.time
    } else {
      vue.permanent = true
      vue.time = 0
    }
  } else {
    vue.permanent = true
    vue.time = 0
  }
}

</script>
